<template>
	<div>
		<TypeNav />
		<div class="main">
			<div class="py-container">
				<!--面包屑导航-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<a href="#">全部结果</a>
						</li>
					</ul>
					<ul class="fl sui-tag">
						<!-- 分类-面包屑 -->
						<li class="with-x" v-show="paramsObj.categoryName">
							{{ paramsObj.categoryName }}<i @click="removeCategoryName">×</i>
						</li>
						<!-- 搜索关键字-面包屑 -->
						<li class="with-x" v-show="paramsObj.keyword">
							{{ paramsObj.keyword }}<i @click="removeKeyword">×</i>
						</li>
						<!-- 品牌-面包屑 -->
						<li class="with-x" v-show="paramsObj.trademark">
							{{ paramsObj.trademark.split(":")[1] || "" }}
							<i @click="removeTrademark">×</i>
						</li>
						<!-- 参数信息-面包屑 -->
						<li
							class="with-x"
							v-show="paramsObj.props.length"
							v-for="(attr, index) in paramsObj.props"
							:key="index + 1"
						>
							{{ attr.split(":")[1] }}
							<i @click="removeAttr(index)">×</i>
						</li>
					</ul>
				</div>

				<!--selector-->
				<SearchSelector @trademarkInfo="postTrademark" @attrInfo="postAttr" />

				<!--details-->
				<div class="details clearfix">
					<!-- 排序  -->
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<ul class="sui-nav">
								<li :class="{ active: isOne }" @click="changeOrder(1)">
									<a>
										综合
										<i
											v-show="isOne"
											class="iconfont"
											:class="{
												'icon-xiangxiajiantoucuxiao': isDesc,
												'icon-xiangshangjiantoucuxiao': !isDesc,
											}"
										/>
									</a>
								</li>
								<li :class="{ active: isTwo }" @click="changeOrder(2)">
									<a>
										价格
										<i
											v-show="isTwo"
											class="iconfont"
											:class="{
												'icon-xiangxiajiantoucuxiao': isDesc,
												'icon-xiangshangjiantoucuxiao': !isDesc,
											}"
										/>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<!-- 商品展示 -->
					<div class="goods-list">
						<ul class="yui3-g">
							<li class="yui3-u-1-5" v-for="good in goodsList" :key="good.id">
								<div class="list-wrap">
									<div class="p-img">
										<router-link
											:to="{
												name: 'detail',
												params: { skuId: good.id },
											}"
										>
											<!-- 👇mock备用👇 -->
											<!-- <router-link :to="{ name: 'detail' }"> -->
											<img v-lazy="good.defaultImg" />
										</router-link>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<span>{{ good.price }}.00</span>
										</strong>
									</div>
									<div class="attr">
										<a
											target="_blank"
											href="item.html"
											title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】"
										>
											{{ good.title }}
										</a>
									</div>
									<div class="commit">
										<i class="command">已有<span>2000</span>人评价</i>
									</div>
									<div class="operate">
										<a
											href="success-cart.html"
											target="_blank"
											class="sui-btn btn-bordered btn-danger"
											>加入购物车</a
										>
										<a href="javascript:void(0);" class="sui-btn btn-bordered"
											>收藏</a
										>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<!-- 分页 -->
					<Pagination
						:pageNo="paramsObj.pageNo"
						:pageSize="paramsObj.pageSize"
						:total="total"
						:continues="5"
						@pageNoInfo="postPageNo"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SearchSelector from "./SearchSelector/SearchSelector";
import { mapGetters } from "vuex";

export default {
	name: "Search",
	components: {
		SearchSelector,
	},
	data() {
		return {
			// 这个对象一定不能瞎定义，后台要拿着正确的数据类型请求服务器
			// 一个优化细节，变量是undefined的话，不会带给后台
			paramsObj: {
				// 三级分类菜单信息
				category1Id: undefined,
				category2Id: undefined,
				category3Id: undefined,
				categoryName: undefined,
				// 搜索关键字
				keyword: undefined,
				// 排序
				// 1: 综合,2: 价格 ,  asc: 升序,desc: 降序
				order: "1:desc",
				// 品牌信息
				trademark: "",
				// 详情参数信息
				props: [],
				// 分页信息
				pageNo: 1,
				pageSize: 5,
			},
		};
	},
	// 拿着整理好的params对象向服务器提交
	mounted() {
		// 在mounted提交之前参数进行整理
		// this.paramsObj = { ...this.$route.params, ...this.$route.query };
		// Object.assign(给谁加,...加谁); // 对象的合并，后者覆盖前者
		Object.assign(this.paramsObj, this.$route.params, this.$route.query);
		this.postSearchList();
		// 注意:每次发完请求之后，三级菜单需要置空
		this.paramsObj.category1Id = undefined;
		this.paramsObj.category2Id = undefined;
		this.paramsObj.category3Id = undefined;
	},
	methods: {
		// post搜索数据
		postSearchList() {
			this.$store.dispatch("search/postSearchList", this.paramsObj);
			// this.$set(this.paramsObj, "pageNo", 1);
		},

		// 移除面包屑-分类名-query
		removeCategoryName() {
			this.paramsObj.categoryName = undefined;
			// 重置页面路由信息，注意这里只是清楚query，params还需要保留
			// 只跳当前页的关键字，分类名query不要了，因为路由跳转了，watch监测到了自动发请求
			this.$router.push({
				name: "search",
				params: this.$route.params,
			});
		},
		// 移除面包屑-关键字-params
		removeKeyword() {
			this.paramsObj.keyword = undefined;
			// 这里的细节，如果面包屑消失，搜索框内的数据也需要清空，兄弟通信：$bus
			this.$bus.$emit("clearInp");

			this.$router.push({
				name: "search",
				query: this.$route.query,
			});
		},

		// 品牌信息-提交
		postTrademark({ tmId, tmName }) {
			this.paramsObj.trademark = `${tmId}:${tmName}`;
			// if()
			this.postSearchList();
		},
		// 品牌信息-面包屑移除
		removeTrademark() {
			this.paramsObj.trademark = "";
			this.postSearchList();
		},

		// 属性信息-提交
		postAttr(attr, attrVal) {
			let attrStr = `${attr.attrId}:${attrVal}:${attr.attrName}`;
			// 如果对象的数组中 没有这条信息 再添加
			if (this.paramsObj.props.indexOf(attrStr) === -1) {
				this.paramsObj.props.push(attrStr);
				this.postSearchList();
			}
		},
		// 属性信息-面包屑移除
		removeAttr(index) {
			this.paramsObj.props.splice(index, 1); // 根据点击的index删除数组对应的下标
			this.postSearchList();
		},

		// 排序按钮
		changeOrder(orderName) {
			// 默认值："1:desc"
			const originArrow = this.paramsObj.order.split(":")[1];
			if (orderName == 1) {
				this.paramsObj.order = `${1}:${originArrow == "desc" ? "asc" : "desc"}`;
			} else if (orderName == 2) {
				this.paramsObj.order = `${2}:${originArrow == "asc" ? "desc" : "asc"}`;
			}
			this.postSearchList();
		},

		// 等着分页组件调用，传来页码
		postPageNo(pageNo) {
			this.paramsObj.pageNo = pageNo;
			this.postSearchList();
		},
	},
	watch: {
		// 给所有的的点击加请求不得加死了，既然单击改变了路由信息，那么就监听路由
		// 监视路由当前页路由的变化，一旦变化重新整理对象数据，发送请求
		$route: {
			handler(nv, ov) {
				Object.assign(this.paramsObj, this.$route.params, this.$route.query);
				this.postSearchList();
				this.paramsObj.category1Id = undefined;
				this.paramsObj.category2Id = undefined;
				this.paramsObj.category3Id = undefined;
			},
		},
	},
	computed: {
		...mapGetters("search", ["goodsList", "total"]),
		// 排序活跃样式、箭头图标
		isOne() {
			return this.paramsObj.order.indexOf("1") != "-1";
		},
		isTwo() {
			return this.paramsObj.order.indexOf("2") != "-1";
		},
		// 图标升降序-如果是降序
		isDesc() {
			return this.paramsObj.order.indexOf("desc") != -1;
		},
	},
};
</script>

<style lang="less" scoped>
.main {
	margin: 10px 0;

	.py-container {
		width: 1200px;
		margin: 0 auto;

		.bread {
			margin-bottom: 5px;
			overflow: hidden;

			.sui-breadcrumb {
				padding: 3px 15px;
				margin: 0;
				font-weight: 400;
				border-radius: 3px;
				float: left;

				li {
					display: inline-block;
					line-height: 18px;

					a {
						color: #666;
						text-decoration: none;

						&:hover {
							color: #4cb9fc;
						}
					}
				}
			}

			.sui-tag {
				margin-top: -5px;
				list-style: none;
				font-size: 0;
				line-height: 0;
				padding: 5px 0 0;
				margin-bottom: 18px;
				float: left;

				.with-x {
					font-size: 12px;
					margin: 0 5px 5px 0;
					display: inline-block;
					overflow: hidden;
					color: #000;
					background: #f7f7f7;
					padding: 0 7px;
					height: 20px;
					line-height: 20px;
					border: 1px solid #dedede;
					white-space: nowrap;
					transition: color 400ms;
					cursor: pointer;

					i {
						margin-left: 10px;
						cursor: pointer;
						font: 400 14px tahoma;
						display: inline-block;
						height: 100%;
						vertical-align: middle;
					}

					&:hover {
						color: #28a3ef;
					}
				}
			}
		}

		.details {
			margin-bottom: 5px;

			.sui-navbar {
				overflow: visible;
				margin-bottom: 0;

				.filter {
					min-height: 40px;
					padding-right: 20px;
					background: #fbfbfb;
					border: 1px solid #e2e2e2;
					padding-left: 0;
					border-radius: 0;
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

					.sui-nav {
						position: relative;
						left: 0;
						display: block;
						float: left;
						margin: 0 10px 0 0;

						li {
							float: left;
							line-height: 18px;

							a {
								display: block;
								cursor: pointer;
								padding: 11px 15px;
								color: #777;
								text-decoration: none;
							}

							&.active {
								a {
									background: #e1251b;
									color: #fff;
								}
							}
							// ---------------------------------
							i {
								line-height: 18px;
								transition: 0.5s all ease;
							}
						}
					}
				}
			}

			.goods-list {
				margin: 20px 0;

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						height: 100%;
						width: 20%;
						margin-top: 10px;
						line-height: 28px;

						.list-wrap {
							.p-img {
								padding-left: 15px;
								width: 215px;
								height: 255px;

								a {
									color: #666;

									img {
										max-width: 100%;
										height: auto;
										vertical-align: middle;
									}
								}
							}

							.price {
								padding-left: 15px;
								font-size: 18px;
								color: #c81623;

								strong {
									font-weight: 700;

									i {
										margin-left: -5px;
									}
								}
							}

							.attr {
								padding-left: 15px;
								width: 85%;
								overflow: hidden;
								margin-bottom: 8px;
								min-height: 38px;
								cursor: pointer;
								line-height: 1.8;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

								a {
									color: #333;
									text-decoration: none;
								}
							}

							.commit {
								padding-left: 15px;
								height: 22px;
								font-size: 13px;
								color: #a7a7a7;

								span {
									font-weight: 700;
									color: #646fb0;
								}
							}

							.operate {
								padding: 12px 15px;

								.sui-btn {
									display: inline-block;
									padding: 2px 14px;
									box-sizing: border-box;
									margin-bottom: 0;
									font-size: 12px;
									line-height: 18px;
									text-align: center;
									vertical-align: middle;
									cursor: pointer;
									border-radius: 0;
									background-color: transparent;
									margin-right: 15px;
								}

								.btn-bordered {
									min-width: 85px;
									background-color: transparent;
									border: 1px solid #8c8c8c;
									color: #8c8c8c;

									&:hover {
										border: 1px solid #666;
										color: #fff !important;
										background-color: #666;
										text-decoration: none;
									}
								}

								.btn-danger {
									border: 1px solid #e1251b;
									color: #e1251b;

									&:hover {
										border: 1px solid #e1251b;
										background-color: #e1251b;
										color: white !important;
										text-decoration: none;
									}
								}
							}
						}
					}
				}
			}

			.page {
				width: 733px;
				height: 66px;
				overflow: hidden;
				float: right;

				.sui-pagination {
					margin: 18px 0;

					ul {
						margin-left: 0;
						margin-bottom: 0;
						vertical-align: middle;
						width: 490px;
						float: left;

						li {
							line-height: 18px;
							display: inline-block;

							a {
								position: relative;
								float: left;
								line-height: 18px;
								text-decoration: none;
								background-color: #fff;
								border: 1px solid #e0e9ee;
								margin-left: -1px;
								font-size: 14px;
								padding: 9px 18px;
								color: #333;
							}

							&.active {
								a {
									background-color: #fff;
									color: #e1251b;
									border-color: #fff;
									cursor: default;
								}
							}

							&.prev {
								a {
									background-color: #fafafa;
								}
							}

							&.disabled {
								a {
									color: #999;
									cursor: default;
								}
							}

							&.dotted {
								span {
									margin-left: -1px;
									position: relative;
									float: left;
									line-height: 18px;
									text-decoration: none;
									background-color: #fff;
									font-size: 14px;
									border: 0;
									padding: 9px 18px;
									color: #333;
								}
							}

							&.next {
								a {
									background-color: #fafafa;
								}
							}
						}
					}

					div {
						color: #333;
						font-size: 14px;
						float: right;
						width: 241px;
					}
				}
			}
		}
	}
}
</style>
